移动端优先的flex三栏布局的使用方法

felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。 这篇文章主要介绍了移动端优先的flex三栏布局的使用方法，感兴趣的小伙伴们可以参考一下

默认情况下先显示移动端，通过 @media 属性适配屏幕变化

使用flexbox相关的CSS属性

1.  display: flex; (父元素)
2.  flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超出该如何显示)
3.  flex: flex-grow flex-shrink flex-basis; (子元素, 子元素该如何分配空间)
4.  order: number; (子元素, 子元素的顺序该如何排列)

重点

1.  在父元素上设置 display: flex 和 flex-wrap: wrap
2.  通过 flex 来调整子元素上的空间分配(扩展、收缩比例和伸缩基准值)
3.  通过 order 来调整子元素的显示顺序(把 .center 放在中间)

例子

CSS

`.box {`
`display``: flex;`
`flex-wrap: wrap;`
`text-align``:` `center``;`
`}`
}//欢迎加入全栈开发交流划水交流圈：582735936
]//面向划水1-3年前端人员
}   //帮助突破划水瓶颈，提升思维能力
`.``center` `{`
`background-color``:` `#f00``;`
`flex:` `100%` `1``;`
`}`
`.``left``, .``right` `{`
`flex:` `100%` `1``;`
`}`
`.``left` `{`
`background-color``:` `#0f0``;`
`}`
`.``right` `{`
`background-color``:` `#00f``;`
`}`
`@media` `all` `and (``min-width``:` `400px``) {`
`.``left``, .``right` `{`
`flex:` `50%` `1``;`
`}`
`}`
`@media` `all` `and (``min-width``:` `800px``) {`
`.box {`
`flex-wrap:` `nowrap``;`
`}`
`.``center` `{`
`order:` `2``;`
`flex:` `1``;`
`}`
`.``left``, .``right` `{`
`flex:` `0` `0` `300px``;`
`}`
}//欢迎加入全栈开发交流划水交流圈：582735936
]//面向划水1-3年前端人员
}   //帮助突破划水瓶颈，提升思维能力
`.``left` `{`
`order:` `1``;`
`}`
`.``right` `{`
`order:` `3``;`
`}`
`}`
 |

HTML

`<``div` `class``=``"box"``>`
`<``div` `class``=``"center"``>`

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

`</``div``>`
`<``div` `class``=``"left"``>left</``div``>`
`<``div` `class``=``"right"``>right</``div``>`
`</``div``>`

以上就是本文的全部内容，希望对大家的学习有所帮助，